<template>
	<el-card class="table-wrap" shadow="never">
		<div class="operation mb15">
			<span>
				任务状态：
				<el-select v-model="state.taskTable.params.taskStatus" class="width-150" @change="taskList">
					<el-option
						v-for="item in taskStatusOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</span>
			<span>
				<el-button type="primary" @click="taskList">刷新</el-button>
			</span>
		</div>
		<el-table
			ref="tableRef"
			border
			v-loading="state.taskTable.loading"
			element-loading-text="数据加载中..."
			:data="state.taskTable.data"
			row-key="id"
			:height="props.tableHeight"
		>
			<el-table-column prop="id" label="任务ID" show-overflow-tooltip :width="100" />
			<el-table-column prop="taskName" label="任务名称" show-overflow-tooltip :width="200"/>
			<el-table-column prop="taskStatus" label="任务状态" show-overflow-tooltip :width="100">
				<template #default="{row}">
					<el-tag :type="taskStatusTypeOptions.find(item=>item.value===row.taskStatus)?.type">
						{{ taskStatusTypeOptions.find(item=>item.value===row.taskStatus)?.label }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="taskType" label="任务类型" show-overflow-tooltip :width="150"/>
			<el-table-column prop="taskMessage" label="任务信息" min-width="130" show-overflow-tooltip />
			<el-table-column prop="taskErrorMessage" label="任务失败原因" min-width="130" show-overflow-tooltip />
			<el-table-column prop="taskStartTime" label="创建时间" show-overflow-tooltip :width="180">
				<template #default="{row}">{{ formatDate(new Date(row.taskStartTime),'YYYY-mm-dd HH:MM:SS') }}</template>
			</el-table-column>
			<el-table-column prop="taskEndTime" label="结束时间" show-overflow-tooltip :width="180">
				<template #default="{row}">{{row.taskEndTime ? formatDate(new Date(row.taskEndTime),'YYYY-mm-dd HH:MM:SS') : '-' }}</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-model:current-page="state.taskTable.params.pageNo"
			v-model:page-size="state.taskTable.params.pageSize"
			@current-change="onHandleCurrentChange"
			@size-change="onHandleSizeChange"
			class="mt15"
			:pager-count="5"
			:page-sizes="[10, 20, 30, 50]"
			background
			layout="total, sizes, prev, pager, next, jumper"
			:total="state.taskTable.total"
		>
		</el-pagination>
	</el-card>
</template>
<script lang="ts" setup>
import { useTaskApi } from '/@/api/task';
import { getCurrentInstance, onUnmounted, reactive } from 'vue';
import { formatDate } from '/@/utils/formatTime';

interface TaskDataRow{
	id:number;
	taskName:string;
	taskStatus:number;
	taskMessage:string;
	taskStartTime:string;
	taskEndTime:string;
}
interface TaskTableState{
	taskTable:{
		loading:boolean;
		data:TaskDataRow[];
		total:number;
		params:{
			pageNo:number;
			pageSize:number;
			taskStatus:number|undefined;
		};
	};
}

const { proxy } = <any>getCurrentInstance();
const taskApi = useTaskApi();
const props = defineProps<{
    tableHeight:string;
}>();
const state = reactive<TaskTableState>({
	taskTable: {
		loading: false,
		data: [],
		total: 0,
		params: {
			pageNo: 1,
			pageSize: 10,
			taskStatus: undefined
		}
	}
});
const taskStatusOptions = [
	{ label: '全部', value: undefined },
	{ label: '队列中', value: 1, type: 'warning' },
	{ label: '执行中', value: 2 },
	{ label: '成功', value: 3, type: 'success' },
	{ label: '回滚中', value: 5, type: 'danger' },
	{ label: '失败', value: 4, type: 'danger' },
];
const taskStatusTypeOptions = [
	{ label: '全部', value: undefined },
	{ label: '未开始', value: 0, type: 'info' },
	{ label: '队列中', value: 1, type: 'warning' },
	{ label: '执行中', value: 2 },
	{ label: '成功', value: 3, type: 'success' },
	{ label: '回滚中', value: 5, type: 'warning' },
	{ label: '失败', value: 4, type: 'danger' },
	{ label: '失败', value: 6, type: 'danger' },
];
// task list
const taskList = (refresh:boolean = false) => {
	// Display loading
	if (refresh) {
		state.taskTable.loading = true;
		state.taskTable.data = [];
		state.taskTable.total = 0;
	}
	let req = {};
	if (state.taskTable.params.taskStatus !== undefined) {
		if (state.taskTable.params.taskStatus === 4) {
			req = {
				pageNo: state.taskTable.params.pageNo,
				pageSize: state.taskTable.params.pageSize,
				taskStatus: [4, 6]
			};
		} else {
			req = {
				pageNo: state.taskTable.params.pageNo,
				pageSize: state.taskTable.params.pageSize,
				taskStatus: [state.taskTable.params.taskStatus]
			};
		}
	} else {
		req = {
			pageNo: state.taskTable.params.pageNo,
			pageSize: state.taskTable.params.pageSize,
			taskStatus: []
		};
	}
	taskApi.taskList(req).then((res:any) => {
		state.taskTable.data = res.data.records;
		state.taskTable.total = res.data.total;
	}).catch(() => {
		state.taskTable.data = [];
		state.taskTable.total = 0;
	}).finally(() => {
		state.taskTable.loading = false;
	});
};
// Page number changes
const onHandleCurrentChange = (val:number) => {
	state.taskTable.params.pageNo = val;
	taskList();
};
// Page size changes
const onHandleSizeChange = (val:number) => {
	state.taskTable.params.pageNo = 1;
	state.taskTable.params.pageSize = val;
	taskList();
};
// Receive websocket data call task/list interface
proxy.mittBus.on('refresh-task', taskList);
onUnmounted(() => {
	proxy.mittBus.off('refresh-task', taskList);
});
taskList(true);
</script>
<style lang="scss" scoped>
.table-wrap{
    .operation{
        display: flex;
        justify-content: space-between;
    }
}
</style>